<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="../../plugins/element-ui/index.css" />
  <link rel="stylesheet" href="../../styles/common.css" />
  <link rel="stylesheet" href="../../styles/page.css" />
</head>
<body>
<div class="dashboard-container" id="category-app">
  <el-upload class="avatar-uploader" action="/common/upload"
              :show-file-list="false"
             :on-success="handleAvatarSuccess"
             :before-upload="beforeUpload"
             ref="upload">
    <img v-if="imageUrl" :src="imageUrl" class="avatar">
    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
  </el-upload>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../../plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../../plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../../plugins/axios/axios.min.js"></script>
<script src="../../js/request.js"></script>
<script>
  new Vue({
    el: '#category-app',
    data() {
      return {
        action: '',
        imageUrl:'',
      }
    },
    computed: {},
    created() {

    },
    mounted() {
    },
    methods: {
      beforeUpload(file) {
        if(file){
          const suffix = file.name.split(".")[1]
          const size = file.size/1024/1024 < 2
          if(['png','jpeg','jpg']){
            this.$message.error('上传图片只支持 png，jpeg，jpg格式');
            this.$refs.upload.clearFiles()
            return false
          }
          if(!size){
            this.$message.error('上传图片大小不能超过2MB');
            return false
          }
        }

      },
      handleAvatarSuccess (response,file,fileList) {
        this.imageUrl ='/common/download?name=${response.data}';
      }
    }
  })
</script>
</body>
</html>